<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的消息页</title>
    <link rel="stylesheet" href="CSS/userCenter_message.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $('#reply').hide()
            $('#msgNav li:first-child').click(function () {
                $('#comment').css('display', '')
                $('#reply').hide()
                $(this).css('color','rgb(255, 123, 0)')
                $('#msgNav li:last-child').css('color','#666')
            })
            $('#msgNav li:last-child').click(function () {
                $('#comment').hide()
                $('#reply').show()
                $(this).css('color','rgb(255, 123, 0)')
                $('#msgNav li:first-child').css('color','#666')
            })
            $('.footer a').mouseover(function () {
                $(this).parent().next().css('display', 'block')
            })
            $('.footer a').mouseout(function () {
                $(this).parent().next().css('display', 'none')
            })
        })
    </script>
</head>

<body>
    <div id="msgNav">
        <ul>
            <li>我的评论</li>
            <li>回复评论</li>
        </ul>
    </div>
    <div id="message">
        <div id="comment">
            <ul>
                <li>
                    <div class="header">苏州博物馆 <time>2019/8/14</time></div>
                    <div class="article">
                        <p>·传统的苏州园林风格，高低错落，深灰色屋面与白墙相衬，整个博物馆宛若一座小园林。<br>
                            ·由新馆和忠王府(旧馆)两部分组成，新馆内可看到远古到近代的陶器等，忠王府内，能看到苏式彩绘。</p>
                    </div>
                    <div class="footer"><a href="#">我的评论(2)</a></div>
                    <div class="myComment">
                        <ul>
                            <li><img src="images/headPic/head1.jpg" alt="head">:
                                <p>这是我的评论1</p>
                            </li>
                            <li><img src="images/headPic/head1.jpg" alt="head">:
                                <p>这是我的评论2</p>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="header">拙政园 <time>2019/8/14</time></div>
                    <div class="article">
                        <p>·苏州最大的古典园林代表作品，与北京颐和园、承德避暑山庄、苏州留园一起被誉为中国四大名园。<br>
                            ·园区以水为中心，山木环绕。东部开阔疏朗，西部建筑精美，中部以水池为中心，池中堆山，是全园精华所在。</p>
                    </div>
                    <div class="footer"><a href="#">我的评论(2)</a></div>
                    <div class="myComment">
                        <ul>
                            <li><img src="images/headPic/head1.jpg" alt="head">:
                                <p>这是我的评论1</p>
                            </li>
                            <li><img src="images/headPic/head1.jpg" alt="head">:
                                <p>这是我的评论2</p>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <div id="reply">
            <ul>
                <li>
                    <div class="header">平江路 <time>2019/8/14</time></div>
                    <div class="article">
                        <p>·平江路是苏州的一条历史老街，一条沿河的小路，全长约1.6公里，苏州古城迄今为止保存最为完整的一个区域，堪称古城缩影。<br>
                            ·东西两侧有悬桥巷、大儒巷、中张家巷、大新桥巷等小巷，尤其东边还保留了多条水巷，水陆并行、河街相邻，很有江南水城的特色。</p>
                    </div>
                    <div class="footer"><a href="#">我的回复(2)</a></div>
                    <div class="myComment">
                        <ul>
                            <li><img src="images/headPic/head2.jpg" alt="head">:
                                <p>这是别人的评论</p>
                            </li>
                            <li><img src="images/headPic/head1.jpg" alt="head">:
                                <p>这是我的回复1</p>
                            </li>
                            <li><img src="images/headPic/head1.jpg" alt="head">:
                                <p>这是我的回复2</p>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="header">七里山塘 <time>2019/8/14</time></div>
                    <div class="article">
                        <p>·东连“红尘中一、二等富贵风流之地”阊门，西接“吴中第一名胜”虎丘，长约七里。<br>
                            ·是唐代大诗人白居易任苏州刺史时募工凿河堆堤而成，至今已有一千一百余年历史。</p>
                    </div>
                    <div class="footer"><a href="#">我的回复(2)</a></div>
                    <div class="myComment">
                        <ul>
                            <li><img src="images/headPic/head2.jpg" alt="head">:
                                <p>这是别人的评论</p>
                            </li>
                            <li><img src="images/headPic/head1.jpg" alt="head">:
                                <p>这是我的回复1</p>
                            </li>
                            <li><img src="images//headPic/head1.jpg" alt="head">:
                                <p>这是我的回复2</p>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>